<?php
$f = $this->form;
?>
<div class="content-title">
    <h1><?php echo $this->translate('Contact_Us');?></h1>
</div>
<div class="contact-page">
    <?php echo $this->flashMessenger()?>
    <?php if($this->error != ''): ?>
        <div class="shout-box">
            <div class="alert alert-block 0">
                <a class="close fade in" data-dismiss="alert" href="##">×</a>
                <p style="font-weight:bold;text-align:center"><?php echo $this->translate($this->error); ?></p>
            </div>
        </div>
    <?php endif; ?>

    <div class="contact-left-column">
		<form onsubmit="" id="contact-form" name="contact-form" method="post" action="/Lien-He.html">
			<table style="margin:30px 0px 0px 10px;width:415px;float:left;border:0px">
				<tbody>
					<tr>
						<td class="fc_label">
							<span>Họ Tên&nbsp;</span><span class="required">*</span>
						</td>
						<td class="fc_value">
						    <?php echo $f->getElement('full_name');  ?>
						</td>
					</tr>
					<tr>
						<td class="fc_label">
							<span>Địa chỉ email&nbsp;</span><span class="required">*</span>
						</td>
						<td class="fc_value">
						    <?php echo $f->getElement('email');  ?>
						</td>
					</tr>
					<tr>
						<td class="fc_label">
							<span>Số điện thoại&nbsp;</span>
						</td>
						<td class="fc_value">
					        <?php echo $f->getElement('phone');  ?>
						</td>
					</tr>
					<tr>
						<td class="fc_label"><span>Tiêu đề&nbsp;</span><span class="required">*</span></td>
						<td class="fc_value">
						    <?php echo $f->getElement('subject');  ?>
						</td>
					</tr>
					<tr>
						<td class="fc_label"><span>Nội dung&nbsp;</span><span class="required">*</span></td>
						<td class="fc_value">
						    <?php echo $f->getElement('message');  ?>
						</td>
					</tr>
					<tr>
						<td class=""><span><?php echo $this->translate('Captcha'); ?>&nbsp;</span><span class="required">*</span></td>
						<td class="">
							<?php echo $f->getElement('captcha'); ?>
						</td>
					</tr>
					<tr>
						<td class="fc_label">&nbsp;</td>
						<td class="fc_value">
							<input type="submit" value="Gửi đi" id="frm_submit_contact" class="btn btn-inverse btn-black">
							<input type="reset" value="Làm lại" id="frm_reset_contact" class="btn btn-inverse btn-black">
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>
	<div class="contact-right-column">
        <?php $siteInfo = $this->siteInfo; ?>
        <?php $siteSetting = $this->siteSetting; ?>
        <?php echo $siteSetting['iframe_map']; ?>
        <!-- <iframe width="450" height="248" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=sofitel+h%C3%A0+n%E1%BB%99i&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=38.502405,79.013672&amp;ie=UTF8&amp;hq=sofitel&amp;hnear=Hoan+Kiem+District,+Hanoi,+Vietnam&amp;t=m&amp;fll=21.045093,105.850954&amp;fspn=0.022189,0.038581&amp;st=105382775843509830183&amp;rq=1&amp;ev=p&amp;split=1&amp;ll=21.047737,105.849752&amp;spn=0.022188,0.038581&amp;output=embed"></iframe>  -->
	    <div style="width:100%;">
	        <div style="width:100%;margin-top:20px;float:left;line-height:20px">
    		    <b><?php echo $this->translate('Address'); ?></b>:&nbsp; <?php echo $siteInfo['address'] ?><br>
    			<b><?php echo $this->translate('Tel'); ?></b>:&nbsp; <?php echo $siteInfo['tel'] ?><br>
    			<b><?php echo $this->translate('Fax'); ?></b>:&nbsp; <?php echo $siteInfo['fax'] ?><br>
    			<b><?php echo $this->translate('Email'); ?></b>:&nbsp; <a href="mailto:<?php echo $siteInfo['email_contact'] ?>"><?php echo $siteInfo['email_contact'] ?> </a><br>
    			<b><?php echo $this->translate('Website'); ?></b>:&nbsp; <a href="<?php echo $siteInfo['website'] ?>"><?php echo $siteInfo['website'] ?> </a>
	        </div>
	    </div>
	</div>
</div>


<style>
input {
	width: 260px;
}
.contact-page {
	width:100%;margin:0px 0px 30px 20px;overflow:hidden;
	font-size: 13px;
}
.contact-left-column {
	width:420px;float:left;
}
.contact-right-column {
	width:460px;margin-top:30px;float:left;
}
#captcha {
	float: left;
}
.image-captcha {
	display: block;
    float: left;
    margin-left: 5px;
    border: 1px solid #ddd;
}
.change-captcha {
	display: block;
    float: left;
    margin-left: 5px;
}
.required{
	color: red;
}
.btn-black {
	padding: 4px 8px;
	background-color: #181818;
	color: #fff;
}
.shout-box {
	width: 90%;
	margin: 40px 0px 0px 25px;
}
</style>

<script>
$(function(){
	var form    = $("#contact-form");
	var name    = $("#full_name");
	var email   = $("#email");
	var subject = $("#subject");
	var message = $("#message");

	name.blur(validateName);
	email.blur(validateEmail);
	subject.blur(validateSubject);
	message.blur(validateMessage);

	form.submit(function(){
		if(validateName() && validateEmail() && validateSubject() && validateMessage()) {
			return true;
		}

		return false;
	});
	function validateName(){
		if(name.val().length < 4){
			$(".full-name-error").remove();
			name.after("<ul class='errors full-name-error'><li><?php echo $this->translate("We_want_names_with_more_than_3_letters!"); ?></li></ul>");
			return false;
		}
		else{
			$(".full-name-error").remove();
			return true;
		}
	}

	function validateEmail(){
		var a = $("#email").val();
		var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
		if(filter.test(a)){
			$(".email-error").remove();
			return true;
		} else{
			$(".email-error").remove();
			email.after("<ul class='errors email-error'><li><?php echo $this->translate("Type_a_valid_email_please") ?></li></ul>");
			return false;
		}
	}
	function validateSubject(){
		if(subject.val().length < 10){
			$(".subject-error").remove();
			subject.after("<ul class='errors subject-error'><li><?php echo $this->translate("We_want_subject_with_more_than_10_letters!") ?></li></ul>");
			return false;
		}
		else{
			$(".subject-error").remove();
			return true;
		}
	}
	function validateMessage(){
		if(message.val().length == 0){
			$(".message-error").remove();
			message.after("<ul class='errors message-error'><li><?php echo $this->translate("Value_is_required_and_can't_be_empty!") ?></li></ul>");
			return false;
		}
		else{
			$(".message-error").remove();
			return true;
		}
	}

	i = $('.contact-right-column').find('iframe').attr({width: '450px', height: '248px', style: 'border:1px solid #ddd;padding:5px', frameborder:"1", scrolling:"no", marginheight:0, marginwidth:0});

    $('.close').click(function() {
    	$('.shout-box').remove();
    });
});
</script>